<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-tabs defaultActiveKey="0" @change="pageChange">
        <a-tab-pane :tab="page.name" v-for="(page,index) in pageList" :key="index+1"></a-tab-pane>
      </a-tabs>

      <a-table :columns="columns" :dataSource="contentList" :pagination="false" rowKey="id">
        <span slot="status" slot-scope="text,record">
          <template>
            <a-badge status="success" v-if="record.status==1" text="显示" />
            <a-badge status="default" v-else text="隐藏" />
          </template>
        </span>
        <span slot="type" slot-scope="text,record">
          <template>
            <span v-if="record.type=='slidePics'">图展</span>
            <span v-else-if="record.type=='navButton'">导航按钮</span>
            <span v-else-if="record.type=='notice'">通知公告</span>
            <span v-else-if="record.type=='pic'">图片</span>
            <span v-else-if="record.type=='shop'">门店</span>
            <span v-else-if="record.type=='goodsList0'">商品(横向滚动)</span>
            <span v-else-if="record.type=='goodsList1'">商品(小图)</span>
            <span v-else-if="record.type=='goodsList2'">商品(中图)</span>
            <span v-else-if="record.type=='goodsList3'">商品(大图)</span>
          </template>
        </span>

        <span slot="rank" slot-scope="text,record">
          <template>
            <editable-cell :text="text" @change="onRankChange(record.id, 'rank', $event)" />
          </template>
        </span>
        <template slot="action" slot-scope="text,record">
          <a href="javascript:;" @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除此条规则吗" @confirm="onDelete(record)" okText="确定" cancelText="取消">
            <a href="javascript:;">删除</a>
          </a-popconfirm>
        </template>
        <template slot="footer" slot-scope>
          <a-button icon="plus" @click="handleAdd">新增</a-button>
        </template>
      </a-table>

      <a-modal
        title="操作"
        :width="1000"
        style="top: 20px;"
        :bodyStyle="{maxHeight:'500px','overflowY':'scroll'}"
        v-model="visible"
        @ok="handleOk"
      >
        <a-spin :spinning="saveLoading">
          <a-form :form="form">
            <a-form-item label="组件类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-radio-group
                :disabled="formData.id>0"
                v-model="formData.type"
                @change="typeChange"
                buttonStyle="solid"
              >
                <a-radio-button value="slidePics">图展</a-radio-button>
                <a-radio-button value="navButton">导航按钮</a-radio-button>
                <a-radio-button value="notice">通知公告</a-radio-button>
                <a-radio-button value="pic">图片</a-radio-button>
                <a-radio-button value="shop">门店</a-radio-button>
                <a-radio-button value="goodsList0">商品(横向滚动)</a-radio-button>
                <a-radio-button value="goodsList1">商品(小图)</a-radio-button>
                <a-radio-button value="goodsList2">商品(中图)</a-radio-button>
                <a-radio-button value="goodsList3">商品(大图)</a-radio-button>
              </a-radio-group>
            </a-form-item>

            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称" hasFeedback>
              <a-input
                v-decorator="[
          'name',
          {rules: []}
        ]"
                placeholder="选填"
              />
            </a-form-item>

            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="显示标题" hasFeedback>
              <a-input
                v-decorator="[
          'title',
          {rules: []}
        ]"
                placeholder="标题将显示在页面上"
              />
            </a-form-item>

            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="状态" hasFeedback>
              <r-switch
                :formData="formData"
                field="status"
                :checkedValue="1"
                :unCheckedValue="2"
                checkedChildren="显示"
                unCheckedChildren="隐藏"
              />
            </a-form-item>

            <slide-pic-picker
              :formData="formData"
              field="content"
              v-if="formData.type=='slidePics'"
            />
            <nav-button-picker
              :formData="formData"
              field="content"
              v-if="formData.type=='navButton'"
            />
            <notice-picker :formData="formData" field="content" v-if="formData.type=='notice'" />
            <pic-picker :formData="formData" field="content" v-if="formData.type=='pic'" />
            <shop-list-picker :formData="formData" field="content" v-if="formData.type=='shop'" />
            <goods-list-picker
              :formData="formData"
              field="content"
              v-if="formData.type=='goodsList0'"
            />
            <goods-list-picker
              :formData="formData"
              field="content"
              v-if="formData.type=='goodsList1'"
            />
            <goods-list-picker
              :formData="formData"
              field="content"
              v-if="formData.type=='goodsList2'"
            />
            <goods-list-picker
              :formData="formData"
              field="content"
              v-if="formData.type=='goodsList3'"
            />
          </a-form>
        </a-spin>
        <template slot="footer">
          <a-button key="cancel" @click="handleCancel">取消</a-button>
          <a-button key="forward" :loading="saveLoading" type="primary" @click="handleOk">保存</a-button>
        </template>
      </a-modal>
    </div>
  </a-card>
</template>

<script>
import STable from '@/components/table/'
import UEditor from '@/components/UEditor/'
import EditableCell from '@/components/EditableCell/'
import RSwitch from '@/components/RSwitch/'
import UrlPicker from '@/components/UrlPicker/'
import {
  NoticePicker,
  SlidePicPicker,
  NavButtonPicker,
  PicPicker,
  GoodsListPicker,
  ShopListPicker
} from '@/components/ComPicker/'
import PicUploader from '@/components/PicUploader/'
import moment from 'moment'
import {
  getPageList,
  getContentList,
  editPage,
  addPageContent,
  editPageContent,
  getContentDetail,
  setContentRank,
  deleteContent
} from '@/api/page'

export default {
  name: 'IndexPage',
  components: {
    STable,
    EditableCell,
    RSwitch,
    PicUploader,
    UEditor,
    NoticePicker,
    SlidePicPicker,
    NavButtonPicker,
    UrlPicker,
    GoodsListPicker,
    ShopListPicker,
    PicPicker
  },
  data() {
    return {
      visible: false,
      saveLoading: false,
      openKeys: [],
      // 查询参数
      queryParam: {
        page_id: 1
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      form: this.$form.createForm(this),
      mdl: {},
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: 'id'
        },
        {
          title: '标题',
          dataIndex: 'title'
        },
        {
          title: '名称',
          dataIndex: 'name'
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '类型',
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '排序',
          dataIndex: 'rank',
          scopedSlots: { customRender: 'rank' }
        },
        {
          title: '更新时间',
          dataIndex: 'update_time',
          customRender: text => {
            return moment(text * 1000).format('YYYY-MM-DD HH:mm:ss')
          }
        },
        {
          table: '操作',
          dataIndex: 'action',
          width: '150px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象

      pageList: [],
      contentList: [],
      cateOptions: [],
      selectedRowKeys: [],
      selectedRows: [],
      formData: {
        id: 0,
        title: '',
        name: '',
        type: 'slidePics',
        content: [],
        rank: 0,
        status: 1,
        url: {}
      }
    }
  },
  created() {
    let that = this
    getPageList().then(res => {
      this.pageList = res.data
    })
    that.load()
  },
  methods: {
    load() {
      let that = this
      getContentList(that.queryParam).then(res => {
        that.contentList = res.data
      })
    },
    handleCancel() {
      this.visible = false
    },
    // 增
    handleAdd() {
      let that = this
      this.visible = true
      this.form.resetFields()
      this.formData = {
        id: 0,
        title: '',
        type: 'slidePics',
        page_id: that.queryParam.page_id,
        content: [],
        rank: 0,
        status: 1
      }
      setTimeout(() => {
        that.form.setFieldsValue({ ...this.formData })
      })
    },
    // 改
    handleEdit(record) {
      const self = this
      getContentDetail({ id: record.id }).then(res => {
        setTimeout(() => {
          self.form.setFieldsValue({ ...res.data })
        }, 1)
        //          self.formData = {...res.data};
        self.formData = Object.assign(self.formData, res.data) //尼玛 日期选择器有bug 必须这样赋值
        self.formData.id = res.data.id
      })
      this.visible = true
    },

    // 增改 处理
    handleOk(e) {
      let self = this
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          console.log('Received valuess of formData: ', self.formData)
          self.saveLoading = true
          let formData = {
            id: self.formData.id,
            title: values.title,
            name: values.name,
            page_id: self.formData.page_id,
            type: self.formData.type,
            content: self.formData.content,
            status: self.formData.status
          }
          if (self.formData.id) {
            editPageContent(formData)
              .then(res => {
                self.$message.success('修改成功')
                self.load()
                self.visible = false
                self.saveLoading = false
              })
              .catch(err => {
                self.$message.error(err.data.msg)
                self.saveLoading = false
              })
          } else {
            addPageContent(formData)
              .then(res => {
                self.$message.success('新增成功')
                self.load()
                self.visible = false
                self.saveLoading = false
              })
              .catch(err => {
                self.$message.error(err.data.msg)
                self.saveLoading = false
              })
          }
        }
      })
    },
    pageChange(index) {
      this.queryParam.page_id = this.pageList[index - 1].id
      this.load()
    },

    onRankChange(key, dataIndex, value) {
      let self = this
      setContentRank({
        id: key,
        rank: value
      })
        .then(res => {
          self.load()
        })
        .catch(err => {
          self.$message.error(err.data.msg)
        })
    },

    onDelete(record) {
      let self = this
      deleteContent({ id: record.id })
        .then(res => {
          self.$message.success('删除成功')
        })
        .catch(err => {
          self.$message.error(err.data.msg)
        })
    },

    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    typeChange() {
      let that = this
      let type = this.formData.type
      if (this.formData.content.length > 0) {
        this.formData.content = []
      }
    }
  }
}
</script>

<style lang="less">
.custom-tree {
  /deep/ .ant-menu-item-group-title {
    position: relative;
    &:hover {
      .btn {
        display: block;
      }
    }
  }

  /deep/ .ant-menu-item {
    &:hover {
      .btn {
        display: block;
      }
    }
  }

  /deep/ .btn {
    display: none;
    position: absolute;
    top: 0;
    right: 10px;
    width: 20px;
    height: 40px;
    line-height: 40px;
    z-index: 1050;

    &:hover {
      transform: scale(1.2);
      transition: 0.5s all;
    }
  }
}
</style>